<template>
    <!-- 
        页面以 QS （勤瘦） 为主命名
        每个页面再根据页面内容，添加不同命名后续 （如登录页 - loading）
        页面内命名都以本页面主题为开头，加功能后缀 如：loading-confirm-btn
        本页面主题:loading
     -->
    <div class="QS-content-template QS-loading image">
        <div class="loading_cont">
            <h3 class="loading_tips">用户登录</h3>

            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="70px" class="demo-ruleForm loading_form">
                <el-form-item label="用户名" prop="name">
                    <el-input
                        class="loading_userName"
                        v-model="ruleForm.name"
                        clearable>
                    </el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input
                        class="loading_password"
                        v-model="ruleForm.password"
                        show-password
                        clearable>
                    </el-input>
                </el-form-item>
                <el-form-item class="loading_confirm_btn">
                    <el-button 
                        class="loading_btn"
                        type="primary" 
                        @click="submitForm('ruleForm')"
                    >
                        登 录
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>

export default {
	components: {
	
	},
	data(){
        var nameFlag = (rule, value, callback) => {
                console.log(this.$password)
                if (!value) {
                    return callback(new Error('请输入用户名'));
                }
                var callBackFlag = false;
                for(var i = 0;i < this.$password.length;i ++){
                    if(this.$password[i].key == value){
                        callBackFlag = true;
                        break;
                    }
                }
                if(callBackFlag){
                    callback();
                }else{
                    callback(new Error('请输入正确用户名'))
                }
            };
        var passwordFlag = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('请输入密码'));
                }
                for(var i = 0;i < this.$password.length;i ++){
                    if(this.$password[i].key == this.ruleForm.name){
                        if(this.$password[i].value == value){
                            callback();
                        }else{
                            // 请输入正确密码
                            callback(new Error('请输入正确密码'));
                        }
                    }
                }
            };
		return {
            ruleForm: {
                name: '',
                password: '',
            },
            rules: {
                name: [
                    { validator: nameFlag, trigger: 'blur' }
                ],
                password: [
                    { validator: passwordFlag, trigger: 'blur' }
                ],
            }
		}
    },
    mounted(){
        
    },
    methods:{
        // this.$router.push('/GDPLHasReturned');
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    sessionStorage.setItem("QS_userName",this.ruleForm.name);
                    this.$router.push('/QSControl');
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
    }
}
</script>